Jest 基本介紹

Jest 是前端常見的測試框架(Test runner)。
由 Facebook 開發與 React 的整合度高，因此在前端專案中被廣泛使用。

• 除了 Jest 之外，還有其他測試框架，例如 Jasmine(茉莉花)、Mocha(摩卡咖啡）、AVA。

為什麼使用 Jest？

Jest的主要用途是自動化測試，屬於單元測試(Unit Test)的範疇。

• 在最基礎的階段，開發者常使用 console.log 來檢查程式執行狀況，
  但這樣會讓測試檔與主程式混雜在一起。
• 隨著專案規模變大，會增加許多不必要的代碼。
  透過 Jest，可以將測試邏輯分離，使專案更有結構性與可維護性。

測試的兩大類別

1. Unit Test（單元測試）

• 測試專案中最小單位的行為，通常是一個 function。
  驗證 function 是否能正確執行並回傳預期結果。

2. E2E Test（端對端測試）

• 模擬使用者在瀏覽器上的實際操作。

使用 Jest 的流程

1) 安裝

• 需先安裝 Node.js、npm 與 Jest。
  在專案外層執行安裝指令：

  npm install --save-dev jest
  

2) 設定測試指令

• 使用 --coverage 可以產生測試覆蓋率報告，方便了解程式碼的測試完整度。
  在 package.json 中加入：

  "scripts": { 
    "test": "jest --coverage"
  }
  

3) 撰寫測試

• 將需要測試的程式碼輸出成一個 module。
  建立 .test.js 檔案，並引入要測試的 module。

• 常見語法：
  describe()：描述一組測試，類似群組概念。

  describe('測試說明', function() {
    test(...)
  })
  

  test()：定義單一個測試案例。

  test('測試說明', function() {
    expect(測試的函式).toBe(預期回傳的值)
  })
  

• 建議將測試分為 正常情況 與 異常情況，並再細分子情境，以確保涵蓋全面。

4) 執行測試

• 執行測試的方法有：

  npm run test
  npm test q1.test.js
  npm test q1
  

覆蓋率報告（Coverage Report）

Jest 提供測試覆蓋率報告，幫助檢查測試是否完整。

常見指標：

• % Stmts（語句覆蓋率）：程式碼中的語句是否皆有執行。
• % Branch（分支覆蓋率）：if-else 等分支是否都有被執行到。
• % Funcs（功能覆蓋率）：所有 function 是否都有測試。
• % Lines（行覆蓋率）：程式碼中每一行是否皆有執行。
• Uncovered Line #s：未測試到的程式碼行數。

測試原則：3A

在設計測試案例時，可以遵循 3A 原則：

• Arrange：準備測試所需的資料或環境。
• Act：執行要測試的動作或 function。
• Assert：驗證執行結果是否符合預期。

參考資料

• Jest
• MiaHsu [第三週] JavaScript — 測試框架 Jest
• Lai JEST 單元測試學習筆記 | Getting Started、Using Matchers
• Titangene Jest：建置測試環境 (包含 Babel)